<template>
  <div class="user-container">
    <div class="header">
      <router-link to="/">
        <h1>易查企app后台管理系统</h1>
      </router-link>
    </div>
    <div class="body">
      <el-row class="tac">
        <el-col :span="4">
          <el-menu router :default-active="activeMenu">
            <el-menu-item index="/user/info_modify">
              <router-link to="/user/info_modify">
                <span>信息修改</span>
              </router-link>
            </el-menu-item>
            <el-menu-item index="/user/password_modify">
              <router-link to="/user/password_modify">
                <span>密码修改</span>
              </router-link>
            </el-menu-item>
          </el-menu>
        </el-col>
        <el-col :span="20">
          <router-view />
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue'
import { useRoute } from 'vue-router'

const route = useRoute()
const activeMenu = ref(route.path)

watch(route, (newRoute) => {
  activeMenu.value = newRoute.path
})
</script>

<style scoped lang="scss">
.user-container {
  height: 100vh;
  .header {
    height: 60px;
    padding: 0 20px;
    border-bottom: 1px solid #aaa;
    line-height: 80px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    a {
      text-decoration: none; /* 去掉下划线 */
      color: inherit; /* 继承 el-menu-item 的颜色 */
      display: block; /* 让整个菜单项都能点击 */
      width: 100%;
    }
  }
  .body {
    .el-menu {
      height: calc(100vh - 60px);
      border-right: 1px solid #dcdfe6;
    }
    .el-menu a {
      text-decoration: none; /* 去掉下划线 */
      color: inherit; /* 继承 el-menu-item 的颜色 */
      display: block; /* 让整个菜单项都能点击 */
      width: 100%;
      height: 100%;
    }
  }
}
</style>
